<template>
  <div class="form-wrapper" v-loading="loading">
    <div>
      <el-form :label-width="labelWidth">
        <el-form-item label="识别类型" :required="true">
          <el-radio-group
            v-model="distinguishType"
            @change="distinguishTypeChange"
            size="small"
          >
            <el-radio-button label="single">单条数据</el-radio-button>
            <el-radio-button label="mult">多条数据</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div v-show="distinguishType === 'single'">
        <el-form ref="singleForm" :label-width="labelWidth" :model="form">
          <el-form-item
            v-for="(item, key, index) in form"
            :label="key"
            :key="index"
            :required="true"
          >
            <el-input
              v-model="form[key]"
              size="small"
              clearable
              placeholder="请输入"
            ></el-input>
            <div class="el-form-item__error">
              {{ validData(form[key]) }}
            </div>
          </el-form-item>
          <el-form-item>
            <mine-button size="small" @click="submitSingle" type="primary"
              >开始测试</mine-button
            >
          </el-form-item>
        </el-form>
        <!-- <div class="preview" v-show="analysisStatus === 1">
          <div class="preview-header">测试结果</div>
          <div class="preview-body">
            <pre>{{ singleResult }}</pre>
          </div>
        </div> -->
      </div>
      <div v-show="distinguishType === 'mult'">
        <el-form :label-width="labelWidth">
          <el-form-item label="上传数据">
            <mine-upload ref="upload" :fileType="fileType"></mine-upload>
            <mine-button
              secondary
              class="margin--top--ten"
              @click="downloadSample"
              >下载代码规范文档<i class="el-icon-download el-icon--right"></i
            ></mine-button>
          </el-form-item>
          <el-form-item>
            <!-- <mine-button
              v-if="mAnalysisStatus == 0"
              :type="mAnalysisStatus == 0 ? 'primary' : 'success'"
              @click="submitMult"
              >{{ mAnalysisStatus == 0 ? "开始测试" : "下载结果" }}</mine-button
            > -->
            <mine-button @click="submitMult">{{ "开始测试" }}</mine-button>
            <mine-button v-if="mAnalysisStatus == 1" @click="downloadTestResult"
              >测试记录下载</mine-button
            >
            <!-- <mine-button v-else size="small" @click="goBack"
              >返回详情页面</mine-button
            > -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="result-right">
      <div
        class="preview"
        v-show="analysisStatus === 1 && distinguishType === 'single'"
      >
        <div class="preview-header">预测结果</div>
        <div class="preview-body">
          <pre>{{ singleResult }}</pre>
        </div>
      </div>
      <div class="preview" v-show="distinguishType === 'mult'">
        <div
          id="drawEcharts-container"
          style="width: 100%; height: 500px"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import { zipObject } from "lodash";
import { QWebChannel } from "@/modules/index/utils/qwebchannel.js";
export default {
  // props: ["id"],

  computed: {
    type() {
      return this.$route.query.type || "data_predict";
    },
  },

  data() {
    return {
      loading: false,
      labelWidth: "150px",
      distinguishType: "single",
      form: {},
      analysisStatus: 0,
      fileType: ".txt,.csv,.xls,.xlsx",
      taskId: "",
      singleResult: "",
      mAnalysisStatus: 0,
      id: this.$route.query.id,
    };
  },
  methods: {
    async downloadTestResult() {
      let params = {
        taskId: this.taskId,
      };
      let _self = this;
      if (_self.$qwebUtil.isQtClient) {
        const uuid = _self.$qwebUtil.generateRandomUUID();
        let sendObject;
        /* eslint-disable-next-line */
        const channel = new QWebChannel(
          window.qt.webChannelTransport,
          async function (channel) {
            sendObject = channel.objects.sendObject;
            // receivedJSON 修改此处发送请求参数
            const receivedJSON = {
              RequestUrl: `/algoPredictRecord/downloadByTaskId?taskId=${params.taskId}`,
              RequestMethod: "get",
              ContentType: "application/json;charset=UTF-8",
              RequestBody: params,
              isStringParam: false,
              requestId: uuid,
            };
            await _self.$qwebUtil.receive(sendObject, receivedJSON);
          }
        );
      } else if (this.$webview2.isWPF) {
        const uuid = this.$webview2.generateRandomUUID();
        await this.$webview2.sendWebView2(
          `/algoPredictRecord/downloadByTaskId?taskId=${params.taskId}`,
          "get",
          "application/json;charset=UTF-8",
          params,
          false,
          uuid
        );
      } else {
        await this.$store.dispatch("downloadTestResultFile", params);
      }
    },
    async init() {
      this.loading = true;
      setTimeout(() => {
        this.loadTaskId();
      }, 200);
      // await this.loadForm();
      this.loading = false;
    },
    // 加载任务id
    async loadTaskId() {
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl: `/publishtask/publish-task-data/search?page=1&pageSize=1&projectId=${_self.id}`,
                RequestMethod: "get",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: {},
                isStringParam: false,
                requestId: uuid,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (data) {
              if (!data) {
                console.error("No data received.");
              }
              res = JSON.parse(data);
              const result = res.response || {};
              // update the followings
              if (result.success && res.webInfo.requestId == uuid) {
                const data = result.data || {};
                if (data.list && data.list.length) {
                  _self.taskId = data.list[0].id;
                  // 获取到taskId后再进行下一个请求
                  setTimeout(() => {
                    _self.loadForm();
                  }, 200);
                } else {
                  _self.$message.error("获取失败");
                }
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            `/publishtask/publish-task-data/search?page=1&pageSize=1&projectId=${_self.id}`,
            "get",
            "application/json;charset=UTF-8",
            {},
            false,
            uuid
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              let res = e.data.response;
              // TODO： 定制后台数据处理
              if (res.status === 200 && e.data.webInfo.requestId === uuid) {
                const data = res.data || {};
                if (data.list && data.list.length) {
                  this.taskId = data.list[0].id;
                  // 获取到taskId后再进行下一个请求
                  setTimeout(() => {
                    this.loadForm();
                  }, 200);
                } else {
                  this.$message.error("获取失败");
                }
              }
            }
            // { once: true }
          );
        } else {
          const res = await this.$store.dispatch(
            "modelManagePublishTaskDataSearch",
            { projectId: this.id }
          );
          const result = res.data || {};
          if (result.success) {
            const data = result.data || {};
            if (data.list && data.list.length) {
              this.taskId = data.list[0].id;
              // 获取到taskId后再进行下一个请求
              this.loadForm();
            } else {
              this.$message.error("获取失败");
            }
          } else {
            this.$message.error("获取失败");
          }
        }
      } catch (error) {
        console.error(error);
      }
    },
    // 加载单条表单
    async loadForm() {
      const params = {
        taskId: this.taskId,
      };
      this.form = {};
      this.originKey = [];
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl:
                  "/publishtask/publish-task-data/" +
                  params.taskId +
                  "/get-predict-json",
                RequestMethod: "post",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: params,
                isStringParam: false,
                requestId: uuid,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (data) {
              if (!data) {
                console.error("No data received.");
              }
              res = JSON.parse(data);
              const result = res.response || {};
              // update the followings
              if (result.success && res.webInfo.requestId == uuid) {
                const data = result.data || {};
                if (data.length) {
                  _self.form = data[0];
                }
              } else {
                _self.$message.error("表单数据加载失败");
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            "/publishtask/publish-task-data/" +
              params.taskId +
              "/get-predict-json",
            "post",
            "application/json;charset=UTF-8",
            params,
            false,
            uuid
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              let res = e.data.response;
              // TODO： 定制后台数据处理
              if (res.status === 200 && e.data.webInfo.requestId === uuid) {
                const data = res.data || {};
                if (data.length) {
                  this.form = data[0];
                }
              } else {
                this.$message.error("表单数据加载失败");
              }
            },
            { once: true }
          );
        } else {
          const res = await this.$store.dispatch(
            "modelManagerPublishtaskPublishTaskDataIdGetPredictJson",
            params
          );
          const result = res.data || {};
          if (result.success) {
            const data = result.data || [];
            if (data.length) {
              this.form = data[0];
            }
          }
        }
      } catch (e) {
        console.error(e);
      }
    },
    async downloadSample() {
      const params = {
        projectType: this.type,
      };
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl: `/material-info/downloadPredictTemplate?projectType=${params.projectType}`,
                RequestMethod: "post",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: params,
                isStringParam: false,
                requestId: uuid,
              };
              // await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          // async function send() {
          //   sendObject.sendMessage.connect(function (data) {
          //     if (!data) {
          //       console.error("No data received.");
          //     }
          //     res = JSON.parse(data);
          //     const result = res.response || {};
          //     // update the followings
          //     if (result.success && res.webInfo.requestId == uuid) {
          //       const data = result.data || {};
          //       if (data.list && data.list.length) {
          //         const data = res.data || {};
          //         if (data.length) {
          //           _self.form = data[0];
          //         }
          //       } else {
          //         _self.$message.error("获取失败");
          //       }
          //     }
          //   });
          // }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            `/material-info/downloadPredictTemplate?projectType=${params.projectType}`,
            "post",
            "application/json;charset=UTF-8",
            params,
            false,
            uuid
          );
        } else {
          await this.$store.dispatch(
            "modelManageMaterialInfoDownloadPredictTemplate",
            params
          );
        }
      } catch (e) {
        console.error(e);
      }
    },
    distinguishTypeChange() {},
    validData(value) {
      if (this.type === "data_predict") {
        if (!value && value !== 0) {
          return "请输入";
        } else if (!this.$regex.isFloat.test(value)) {
          return "请输入数字";
        } else {
          return "";
        }
      } else {
        if (!value && value !== 0) {
          return "请输入";
        } else {
          return "";
        }
      }
    },
    validAllData() {
      let flag = true;
      for (let i in this.form) {
        const result = this.validData(this.form[i]);
        if (result) {
          flag = false;
        }
      }
      return flag;
    },
    checkInput(rule, value, callback) {
      if (!value && value !== 0) {
        callback(new Error("请输入"));
      } else if (!this.$regex.isFloat.test(value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    },
    async submitSingle() {
      // if (!this.$common.doSubmit('singleForm', this)) return;
      if (!this.validAllData()) return;
      const form = { ...this.form };
      for (let i in form) {
        if (this.type === "data_predict") {
          form[i] = parseFloat(form[i]);
        } else {
          form[i] += "";
        }
      }
      const params = {
        taskId: this.taskId,
        predictData: [
          {
            ...form,
          },
        ],
      };
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl:
                  "/publishtask/publish-task-data/" +
                  params.taskId +
                  "/predict-data",
                RequestMethod: "post",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: params,
                isStringParam: false,
                requestId: uuid,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (data) {
              if (!data) {
                console.error("No data received.");
              }
              res = JSON.parse(data);
              const result = res.response || {};
              // update the followings
              if (result.success && res.webInfo.requestId == uuid) {
                _self.singleResult = result.data;
                _self.analysisStatus = 1;
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            "/publishtask/publish-task-data/" + params.taskId + "/predict-data",
            "post",
            "application/json;charset=UTF-8",
            params,
            false,
            uuid
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              let res = e.data.response;
              // TODO： 定制后台数据处理
              if (res.status === 200) {
                this.singleResult = res.data;
                this.analysisStatus = 1;
              }
            },
            { once: true }
          );
        } else {
          const res = await this.$store.dispatch(
            "modelManagerPublishTaskData",
            params
          );
          const result = res.data || {};
          if (result.success) {
            this.singleResult = result.data;
            this.analysisStatus = 1;
          } else {
            this.$message.error(result.msg || "预测失败");
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 提交上传
    submitMult: function () {
      // if (this.mAnalysisStatus == 0) {
      if (this.checkUpload()) {
        this.$message({ type: "success", message: "开始测试" });
        this.uploadFile();
      }
      // }
    },

    // 文件上传
    uploadFile: async function () {
      var formData = new FormData();
      formData.append("File", this.$refs.upload.fileList[0].raw);
      formData.append("projectId", this.id);
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          // 这里对文件的处理需要转成base64的格式后上传
          let reader = new FileReader();
          reader.readAsDataURL(this.$refs.upload.fileList[0].raw);
          reader.onload = async (e) => {
            formData = e.target.result;
            const uuid = _self.$qwebUtil.generateRandomUUID();
            let sendObject;
            /* eslint-disable-next-line */
            const channel = new QWebChannel(
              window.qt.webChannelTransport,
              async function (channel) {
                sendObject = channel.objects.sendObject;
                // receivedJSON 修改此处发送请求参数
                const receivedJSON = {
                  RequestUrl: `/material-info/upload`,
                  RequestMethod: "post",
                  ContentType: "multipart/form-data",
                  RequestBody: {
                    File: formData,
                    fileName: _self.$refs.upload.fileList[0].name,
                    projectId: _self.id,
                  },
                  isStringParam: false,
                  requestId: uuid,
                };
                await send();
                await _self.$qwebUtil.receive(sendObject, receivedJSON);
                // console.error('received','/feCanvas/pageList')
              }
            );
            /* eslint-disable-next-line */
            async function send() {
              sendObject.sendMessage.connect(function (data) {
                if (!data) {
                  console.error("No data received.");
                }
                res = JSON.parse(data);
                const result = res.response || {};
                // update the followings
                if (result.success && res.webInfo.requestId == uuid) {
                  var dataResult = result.data || {};

                  setTimeout(() => {
                    _self.createTask(dataResult);
                  }, 200);
                } else {
                  _self.$message.warning(result.msg);
                }
              });
            }
          };
        } else if (this.$webview2.isWPF) {
          // 这里对文件的处理需要转成base64的格式后上传
          let reader = new FileReader();
          reader.readAsDataURL(this.$refs.upload.fileList[0].raw);
          reader.onload = async (e) => {
            formData = e.target.result;
            const uuid = this.$webview2.generateRandomUUID();
            await this.$webview2.sendWebView2(
              `/material-info/upload`,
              "post",
              "multipart/form-data",
              {
                File: formData,
                fileName: this.$refs.upload.fileList[0].name,
                projectId: this.id,
              },
              false,
              uuid
            );
            await window.chrome.webview.addEventListener(
              "message",
              (e) => {
                let res = e.data.response;
                if (res.status === 200) {
                  var data = res.data || {};
                  setTimeout(() => {
                    this.createTask(data);
                  }, 200);
                } else {
                  this.$message.warning(res.msg);
                }
              },
              {
                once: true,
                capture: true,
              }
            );
          };
        } else {
          const res = await this.$store.dispatch(
            "modelManageMaterialInfoUpload",
            formData
          );
          const result = res.data || {};
          if (result.success) {
            var data = result.data || {};
            this.createTask(data);
          } else {
            this.$message.error(result.msg || "上传文件失败");
          }
        }
      } catch (e) {
        console.error(e);
      }
    },

    // 创建分析任务
    createTask: async function (data) {
      data["taskId"] = this.taskId;
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl:
                  `/publishtask/publish-task-data/` +
                  data.taskId +
                  `/predict-data-multi-create`,
                RequestMethod: "post",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: data,
                isStringParam: false,
                requestId: uuid,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (resData) {
              if (!resData) {
                console.error("No resData received.");
              }
              res = JSON.parse(resData);
              const result = res.response || {};
              // update the followings
              if (result.success && res.webInfo.requestId == uuid) {
                var resultData = result.data || {};
                data["id"] = resultData.id;
                _self.startTask(data);
              } else {
                _self.$message.error(result.msg || "创建分析任务失败");
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            `/publishtask/publish-task-data/` +
              data.taskId +
              `/predict-data-multi-create`,
            "post",
            "application/json;charset=UTF-8",
            data,
            false,
            uuid
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              let res = e.data.response;
              // TODO： 定制后台数据处理
              if (res.status === 200) {
                var resultData = res.data || {};
                data["id"] = resultData.id;
                this.startTask(data);
              } else {
                this.$message.error(res.msg || "创建分析任务失败");
              }
            },
            { once: true }
          );
        } else {
          const res = await this.$store.dispatch(
            "modelManagePredictDataMultiCreate",
            data
          );
          const result = res.data || {};
          if (result.success) {
            var resultData = result.data || {};
            data["id"] = resultData.id;
            this.startTask(data);
            // 跳到详情页面
            // window.history.go(-1);
          } else {
            this.$message.error(result.msg || "创建分析任务失败");
          }
        }
      } catch (e) {
        console.log(e);
      }
    },

    // 开始任务
    startTask: async function (data) {
      data.diagnoseType = 2;
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl:
                  `/publishtask/publish-task-data/` +
                  data.taskId +
                  `/predict-data-multi`,
                RequestMethod: "post",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: data,
                isStringParam: false,
                requestId: uuid,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (data) {
              if (!data) {
                console.error("No data received.");
              }
              res = JSON.parse(data);
              const result = res.response || {};
              // update the followings
              if (result.success && res.webInfo.requestId == uuid) {
                _self.$message({ type: "success", message: "上传成功" });
                _self.mAnalysisStatus = 1;
                // 给echart的数据赋值
                _self.titleList = result.data.title;
                _self.predictResult = result.data.predictResult;
                _self.resultList = result.data.list;
                _self.drawEcharts();
              } else {
                _self.$message.error(result.msg || "上传失败");
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            `/publishtask/publish-task-data/` +
              data.taskId +
              `/predict-data-multi`,
            "post",
            "application/json;charset=UTF-8",
            data,
            false,
            uuid
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              let res = e.data.response;
              // TODO： 定制后台数据处理
              if (res.status === 200) {
                this.$message({ type: "success", message: "上传成功" });
                this.mAnalysisStatus = 1;
                // 给echart的数据赋值
                this.titleList = res.data.title;
                this.predictResult = res.data.predictResult;
                this.resultList = res.data.list;
                this.drawEcharts();
              } else {
                this.$message.error(res.msg || "上传失败");
              }
            },
            { once: true }
          );
        } else {
          const res = await this.$store.dispatch(
            "modelManagePredictDataMultiRun",
            data
          );
          const result = res.data || {};
          if (result.success) {
            // this.$refs.upload && (this.$refs.upload.uploadStatus = "success");
            this.$message({ type: "success", message: "上传成功" });
            this.mAnalysisStatus = 1;
            // 给echart的数据赋值
            this.titleList = result.data.title;
            this.predictResult = result.data.predictResult;
            this.resultList = result.data.list;
            this.drawEcharts();
          } else {
            this.$message.error(result.msg || "上传失败");
          }
        }
      } catch (e) {
        console.log(e);
      }
    },

    // 检查上传的数据
    checkUpload: function () {
      if (
        !this.$refs.upload.fileList ||
        this.$refs.upload.fileList.length == 0
      ) {
        this.$message({ type: "warning", message: "请选择上传文件" });
        return false;
      }
      return true;
    },

    goBack() {
      window.history.go(-1);
    },
    // 绘制echarts图表
    drawEcharts() {
      let titleList = this.titleList;
      let resultList = this.resultList;
      let myChart = this.$echarts.init(
        document.getElementById("drawEcharts-container")
      );
      myChart.setOption({
        // , { type: "slider" }
        dataZoom: [
          { type: "inside", realTime: true },
          { show: true, realTime: true },
        ],
        tooltip: {
          trigger: "axis",
          //加了变量a和字符'度'
          formatter: (arg, index) => {
            // return arg[0].name + arg[0].dataIndex
            let arr = titleList.map((item, index) => {
              return item + ":" + resultList[arg[0].dataIndex][index];
            });
            return (
              `<span style='color:red'>${arg[0].seriesName}:${arg[0].data}</span><br/>` +
              arr.join("<br/>")
            );
          },
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          data: this.predictResult.map((item, index) => index + 1),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.predictResult,
            type: "line",
            name: "predictData",
            itemStyle: {
              normal: {
                color: "#264f78", //改变折线点的颜色
                lineStyle: {
                  color: "#264f78", //改变折线颜色
                },
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
.preview {
  width: 100%;
  border: 1px solid rgba(#000000, 0.15);
  box-sizing: border-box;
  .preview-header {
    height: 46px;
    background: #fafafa;
    border-radius: 4px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .preview-body {
    background: #ffffff;
    padding: 15px;
    box-sizing: border-box;
  }
}
.form-wrapper {
  display: flex;
  max-width: 100%;
  .form-left {
    width: 40%;
  }
  .result-right {
    margin-left: 40px;
    width: 60%;
  }
}
/deep/ .mine-upload .el-upload-dragger {
  width: 21vw;
}
</style>
